<template>
	<view class="container">
		<view class="profile flex--col flex--gap-20 flex--align-center">
			<view class="profile--avatar" @click="chooseImage" role="button" aria-label="上传头像">
					<image :src="formData.avatar" aria-label="用户头像" id="avatar"  class="icon--large"></image>
					<image src="@/static/images/Camera.png" aria-label="选择头像" class="icon"></image>
			</view>
			<view class="line"></view>
			<view class="profile--form">
				<uni-forms ref="uForm" :modelValue="formData" :rules="rules" >
					<view class="profile--form__box">
						<text class="profile--form__title third-heading--main">基本信息</text>
						<view class="profile--form__group">
							<view class="profile--form__item">
								<uni-forms-item name="username">
									<view class="input__border flex--row flex--align-center flex--between">
										<text class="form--label">支付宝用户名</text>
										<input type="text" v-model="formData.username" class="form--input width-40-percent text-right" placeholder="请输入姓名" />
									</view>
								</uni-forms-item>
							
							</view>
							<view class="profile--form__item">
							<uni-forms-item name="name">
									<view class="input__border flex--row flex--align-center flex--between">
										<text class="form--label">真实姓名</text>
										<input type="text" v-model="formData.name" class="form--input width-40-percent text-right" placeholder="请输入姓名" />
									</view>
								</uni-forms-item>
							</view>
							<view class="profile--form__item">
		
							<uni-forms-item name="gender">
									<view class="flex--row flex--align-center flex--between">
										<text class="form--label">性别</text>
										<AppSelect :option="formData.gender" @changeOption="handleGenderChange" :localdata="sexs"></AppSelect>
									</view>
									<view class="text--fourth-red" v-show="genderError"> 请选择自己的性别 </view>
							</uni-forms-item>
							</view>
						</view>		
					</view>
					<view class="profile--form__box">
						<text class="profile--form__title third-heading--main">必填信息</text>
						<view class="profile--form__group">
							<view class="profile--form__item">
								<uni-forms-item name="career">
									<view class="input__border flex--row flex--align-center flex--between">
										<text class="form--label">职业</text>
										<input type="text" v-model="formData.career" class="form--input width-40-percent text-right" placeholder="请输入职业" />
									</view>	
								</uni-forms-item>
							</view>
							<view class="profile--form__item">
								<uni-forms-item name="phone">
									<view class="input__border flex--row flex--align-center flex--between">
										<text class="form--label">联系方式</text>
										<input type="text" v-model="formData.phone" class="form--input width-40-percent text-right"/>
									</view>
								</uni-forms-item>
							</view>
							<view class="profile--form__item">
								<uni-forms-item name="age">
									<view class="flex--row flex--align-center flex--between">
										<text class="form--label">年龄</text>
										<input type="number" v-model="formData.age" class="form--input width-40-percent text-right" />
									</view>
								</uni-forms-item>
							</view>
						</view>		
					</view>
					<view class="profile--form__box">
						<text class="profile--form__title third-heading--main">必填信息</text>
						<view class="profile--form__group">
							<view class="profile--form__item">
								<uni-forms-item name="describe">
									<view class="input__border flex--col">
										<view class="form--label">视障描述</view>
										<input type="textarea" v-model="formData.describe" placeholder="志愿者可不用填" class="form--input"/>
									</view>
								</uni-forms-item>
							</view>
							<view class="profile--form__item">
								<uni-forms-item name="profile">
									<view class="flex--col">
										<view class="form--label">自我介绍</view>
										<input type="textarea" v-model="formData.profile" class="form--input" />
									</view>
								</uni-forms-item>
							</view>
						</view>		
					</view>				
					<button class="btn" @click="handleSubmit" role="button">提交</button>
				</uni-forms>
			</view>
		</view>

	</view>
</template>
<script>
	import * as UserApi from "@/api/user/user.js"
	import * as CommonApi from "@/api/common/common.js"
	import AppSelect from "@/components/AppSelect/AppSelect.vue"
	import { REFRESH_PERSONALCARD } from "@/core/constant/event.js"
	
	const rules = {
					username: {
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写支付宝用户名',
							},
							// 对name字段进行长度验证
							{
								minLength: 2,
								maxLength: 12,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
						],
						validateTrigger:'submit'
					},
					name: {
						rules:[
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写姓名',
							},
							// 对name字段进行长度验证
							{
								minLength: 2,
								maxLength: 8,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							// 对name字段进行正则匹配：只能是中文字符
							{
								pattern:'[\\u4e00-\\u9fa5]',
								errorMessage: '姓名只能为中文字符',
							}
						],
						validateTrigger:'submit'
					},
					career: {
						rules:[
							{
								required: true,
								errorMessage: '请填写职业',
							},
						],
					},
					phone:{
						rules:[
							{
								required: true,
								errorMessage: '请填写联系方式',
							},
							{
								pattern:'^1\\d{10}$',
								errorMessage: '手机格式不正确',
							},
						]
					},
					age:{
						rules:[
							{
								required: true,
								errorMessage: '请填写年龄',
							},
							{
								format:'number',
								errorMessage: '年龄需要为数字',
							},
							{
								minimum:0,
								errorMessage: '年龄不合法',
							},
							{
								maximum:120,
								errorMessage: '年龄不合法',
							},
						]
					},
					profile: {
						rules:[
							{
								required: true,
								errorMessage: '请填写身份信息',
							},
							{
								maxLength: 50,
								errorMessage: '最大字数上限是50个字',
							},
						],
					},
					describe: {
						rules:[
							{
								maxLength: 50,
								errorMessage: '最大字数上限是50个字',
							},
						],
					}
				 }
			
		
	export default {
		components:{
			AppSelect
		},
		data() {
			return {
				formData:{
					username: "",
					name: "",
					gender: 0,
					age: 0,
					career: "",
					profile: "",
					phone: "",
					describe: "",
					avatar: ""
				},
				 // 临时图片 (用于上传)
				 tempFile: null,
				 disabled:false,
				 rules:rules,
				 sexs:[
				  { value: 1, text: "男" },
				  { value: 2, text: "女" },
				],
				genderError:false,
			
			}
		},
		methods: {
				// 选择图片
				chooseImage() {
						const app = this
						// 选择图片
						uni.chooseImage({
						  count: 1,
						  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						  success(res) {
							app.tempFile = res.tempFiles[0]
							app.formData.avatar = app.tempFile.path
							
						  }
						});
					  },
				
				// 上传图片
				uploadFile() {
						const app = this
						return CommonApi.upload([app.tempFile])
						  .then(file => {
							app.formData.avatar = file.url
							app.tempFile = null
							return true
						  })
						  .catch((err) => {
							console.log(err)
							app.disabled = false
							return false
						  })
					  },
				  
				// 确认修改
				async handleSubmit() {
						const app = this
						// 判断是否上传头像
						if(!app.validateAvatar()){
							app.$confirm({content:"请上传头像"})
							return
						}
						// 判断性别是否选择（uniapp提供的select组件真机上不能使用）
						if(!app.formData.gender){
							app.genderError = true
							app.$confirm({content:"性别未选择！"})
							return
						}
						
						// 判断是否重复提交
						if (app.disabled === true){
							app.$confirm({content:"正在提交中!"})
							return
						}
						app.$refs.uForm.validate(async valid => {
						 
						  if (!!valid){
							  app.$confirm({content:"身份信息不完全或填写错误"})
							  return
						  } 
						  // 重置性别状态
						  app.genderError = false
						  
						  // 按钮禁用
						  app.disabled = true
						  
						  // 先上传头像图片
						  if (app.tempFile && !await app.uploadFile()) {
							return
						  }
						  // 提交保存个人信息
						  UserApi.update(app.formData)
							.then(result => {
							  app.$store.commit("user/SET_COMPLETE",1)
							  uni.$emit(REFRESH_PERSONALCARD)
							  app.$confirm({content:"修改成功！"})
							  setTimeout(() => {
								app.disabled = false
								uni.navigateBack()
							  }, 1500)
							})
							.catch(err => app.disabled = false)
						})
					  },
				validateAvatar(){
					return this.formData.avatar.replaceAll(" ","") !== ""
				},
				getUserInfoDetail() {
					const app = this
					UserApi.detail()
						.then(data => {
							app.formData = data
						})
						.catch(error => {
							console.log(error)
						})
				},
				handleGenderChange(value){
					this.formData.gender = value
				}
				
			},
			async onLoad() {
				await this.getUserInfoDetail()
				console.log(this.sexs)
			}
		}
	
	
</script>

<style scoped lang="scss">
	$color-black:#212529;
	$color-orange-light:#ff8d1a;
	
	.text--fourth-red{
		font-size: 14px;
		font-weight: 500;
		color:red;
	}
	
	
	@mixin border-three-rounding{
			border-radius:8px 0px 8px 8px;
			border:1.5px solid $color-black;
		}
	
	.container {
		padding:20px 0px;
		background-color: #fff;
	}
	.profile{
		width:85%;
		margin: auto;
		
		&--form{
			padding:10px 0px;
			
			
			&__box{
				margin-bottom: 24px;
				color:$color-black;	
			}
			
			&__title{
				display: inline-block;
				margin-bottom: 12px;
			}
			
			&__group{
				@include border-three-rounding
				box-shadow:inset -8px -8px $color-orange-light;
				padding-top:30px;
				padding-bottom:10px;
			}
			
			&__item{
				padding:2px 20px;
				margin-bottom: 12px;
			}
		}
	}
	
	.text-right{
		text-align: right;
	}
	.width-40-percent{
		width:40%;
	}
	
	.w-40-h-20{
		width:40%;
		height:20%;
	}
	
	.input__border{
		border-bottom: 1.8px solid $color-black;
	}
	
	.line{
		width:100%;
		height:2px;
		background-color: $color-black;
		broder-radius:2px;
	}
	
	.form--label{
		font-size: 16px;
		font-weight: 600;
		color:inherit;
	}
	.form--input{
		font-size:14px;
		font-weight: 500;
		padding:4px 10px;
		color:inherit;
	}
	#avatar{
		width:96px;
		height:96px;
		border-radius: 50%;
	}
	
	.btn{
		font-size: 18px;
		font-weight: 600;
		color:$color-black;
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		border: 4upx solid $color-black;
		text-align: center;
		line-height: 80upx;
		box-shadow: -20upx -20upx #ff8d1a;
		margin:auto;
	}
</style>